<template>
	<div class="Homeicon">
		<ul>
			<swiper :options="swiperOption">
				<swiper-slide v-for="(item,key) in pages" :key='key'>
					<li v-for="pp in item" :key="pp.id">
						<img :src="pp.imgUrl" />
						<p>{{pp.title}}</p>
					</li>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</ul>
	</div>
</template>

<script>
	export default {
		props:["IconList"],
		data() {
			return {
				swiperOption: {
					pagination: {
						el: '.swiper-pagination'
					}
				},
				/*IconList: [{
						id: 1,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
						title: "景点门票"
					},
					{
						id: 2,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png",
						title: "游乐场"
					},
					{
						id: 3,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
						title: "长沙必游"
					},
					{
						id: 4,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png",
						title: "亲子游"
					},
					{
						id: 5,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
						title: "一日游"
					},
					{
						id: 6,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
						title: "动植物园"
					},
					{
						id: 7,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png",
						title: "主题乐园"
					},
					{
						id: 8,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/b8/c5dcdb58deec2402.png",
						title: "湘西凤凰"
					},
					{
						id: 9,
						imgUrl: "https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
						title: "打卡圣地"
					},
					{
						id: 10,
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png",
						title: "全部玩乐"
					}
				]*/
			}
		},
		computed: {
			pages() {
				var IconArr = [];
				this.IconList.forEach((item, index) => {
					var idx = Math.floor(index / 8);
					if(!IconArr[idx]) {
						IconArr[idx] = []
					};
					IconArr[idx].push(item);
				})
				return IconArr;
			}
		}
	}
</script>

<style scoped>
	.Homeicon {
		width: 100%;
		display: flex;
		height: 1.85rem;
		font-size: .14rem;
		margin-top: 0.07rem;
		overflow: hidden;
	}
	
	.Homeicon ul {
		width: 100%;
	}
	
	.Homeicon ul li {
		height: .7rem;
		width: 25%;
		float: left;
		text-align: center;
		padding-top: .1rem;
	}
	
	.Homeicon ul li img {
		width: .55rem;
		height: .55rem;
	}
	
	.Homeicon ul li p {
		font-size: 0.1rem;
	}
	
	>>>.swiper-pagination-bullet-active {
		background: #00bcd4;
	}
	
	>>>.swiper-pagination-fraction,
	.swiper-pagination-custom,
	.swiper-container-horizontal>.swiper-pagination-bullets {
		bottom: -0.02rem;
	}
	
	>>>.swiper-pagination-bullet {
		width: 0.05rem;
		height: 0.05rem;
	}
</style>